<script setup>
const data = '/dev-api/profile/upload/2025/07/02/录屏2025-05-09 13.19.05_20250702170007A001.mp4'
</script>
<template>
  <div class="index-4">
    <div class="left">
      <video autoplay loop muted :src="data"></video>
      <div class="data-box-header">监控2</div>
    </div>
    <div class="right">
      <div class="item">
        <div class="tag"><span>监控1</span></div>
        <video autoplay loop muted :src="data"></video>
      </div>
      <div class="item">
        <div class="tag"><span>监控2</span></div>
        <video autoplay loop muted :src="data"></video>
      </div>
      <div class="item">
        <div class="tag"><span>监控3</span></div>
        <video autoplay loop muted :src="data"></video>
      </div>
      <div class="page-footer"></div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.index-4 {
  display: flex;
  gap: 12px;
  .left {
    width: 580px;
    height: 400px;
    background: url('@/assets/images/plant/right-top/index-4-large.png') no-repeat center center;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    video {
      width: 100%;
      height: 306px;
      border-radius: 4px;
      margin-bottom: 20px;
    }
  }
  .right {
    display: flex;
    flex-direction: column;
    gap: 8px;
    .item {
      position: relative;
      .tag {
        position: absolute;
        width: 72px;
        height: 24px;
        top: 5px;
        left: 18px;
        background: url('./kuang.png') no-repeat center center;
        background-size: 100% 100%;
        text-align: center;
        line-height: 20px;
        span {
          font-family: PingFang SC;
          font-weight: 500;
          font-style: Medium;
          font-size: 12px;
          background: linear-gradient(180deg, #e4faff 44.96%, #a2ddff 85.6%);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          display: inline-block;
        }
      }
      width: 224px;
      height: 114px;
      background: url('@/assets/images/plant/right-top/index-4-mini.png') no-repeat center center;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      video {
        margin-top: 2px;
        width: 190px;
        height: 108px;
        border-radius: 2px;
      }
    }
  }
}
</style>
